<script setup lang="ts">
  // export default{
  //   data(){
  //     return{
  //       productList:[
  //         {
  //           proName:"iphone",
  //           proPrice:6999,
  //           proImg:new URL("@/img/iphone.svg",import.meta.url).href
  //         },
  //         {
  //           proName:"huawei",
  //           proPrice:9999,
  //           proImg:new URL("@/img/huawei.svg",import.meta.url).href
  //         },
  //         {
  //           proName:"xiaomi",
  //           proPrice:5999,
  //           proImg:new URL("@/img/xiaomi.svg",import.meta.url).href
  //         },
  //       ],
  //       minPrice:"0",
  //       maxPrice:"99999",
  //       ulStyle:{
  //         liStyle:true
  //       },
  //       proDivStyle:{
  //         proDivStyle:true
  //       },
        
  //       // 购物车
  //       carList:[
  //         {
  //           proName:"xiaomi",
  //           proNumber:2,
  //           proPrice:5000,
  //           proSumPrice:""
  //         },
  //         {
  //           proName:"iphone",
  //           proNumber:2,
  //           proPrice:6000,
  //           proSumPrice:""
  //         },
  //       ],
  //       carBtnStyle:{
  //         carBtn:true,
  //       },
  //       username:"aaaaa",
  //       salary:999
  //     }
  //   },
  //   methods:{
  //     add(index){
  //       this.carList[index].proNumber++
  //     }
  //   }
  // }

  let username="aaaa"
  let salary=9999
</script>

<template>
  
  <!-- <div :class="proDivStyle"> -->
    <!-- 最低价格：<input type="text" v-model="minPrice" >
    最高价格：<input type="text" v-model="maxPrice">
    <ul v-for="pro in productList" :key="pro" :class="ulStyle">
        <li v-if="pro.proPrice>=minPrice && pro.proPrice<=maxPrice"><img :src="pro.proImg" />,{{ pro.proName }},￥{{ pro.proPrice }}</li>
    </ul>
  </div>

  <div >
    <h3>购物车</h3>
    <ul v-for="pro in carList" :key="pro">
      <li :class="ulStyle">
        {{ pro.proName }},
         <input type="text" v-model="pro.proNumber">
         <span></span>
        ￥{{ pro.proPrice }},
        <span>总价:{{ pro.proNumber*pro.proPrice }}</span>
        <button :class="carBtnStyle" @click="pro.proNumber++">+</button>
        <button :class="carBtnStyle" @click="pro.proNumber--" >-</button>
        <button :class="carBtnStyle">删除</button>
      </li>
    </ul> -->
  <!-- </div> -->

  <div>
     姓名：<input type="text" v-model="username">{{ username }}
    薪水：<input type="number" v-model="salary">{{ salary }}
  </div>
   




</template>

<style scoped>
  .liStyle{
    list-style: none;  
  }
  .proDivStyle{
    border: 1px solid black;
    background-color: antiquewhite;
    border-radius: 5px;
  }
  .carBtn{
    background-color: red;
    height: 25px;
    color: white;
    margin-right: 10px;
    border: none;
  }
</style>